<template>
  <!-- 这是一个空模板组件，用于加载样式 -->
</template>

<script setup>
import { onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// 保存原始的ElMessage方法
const originalSuccess = ElMessage.success;
const originalWarning = ElMessage.warning;
const originalInfo = ElMessage.info;
const originalError = ElMessage.error;

// 覆盖ElMessage方法
const overrideMessage = () => {
  // 覆盖成功消息
  ElMessage.success = (options) => {
    if (typeof options === 'string') {
      options = {
        message: options,
        duration: 7000,
        showClose: true
      };
    } else {
      options = {
        ...options,
        duration: options.duration || 7000,
        showClose: options.showClose !== false
      };
    }
    return originalSuccess(options);
  };

  // 覆盖警告消息
  ElMessage.warning = (options) => {
    if (typeof options === 'string') {
      options = {
        message: options,
        duration: 7000,
        showClose: true
      };
    } else {
      options = {
        ...options,
        duration: options.duration || 7000,
        showClose: options.showClose !== false
      };
    }
    return originalWarning(options);
  };

  // 覆盖错误消息
  ElMessage.error = (options) => {
    if (typeof options === 'string') {
      options = {
        message: options,
        duration: 7000,
        showClose: true
      };
    } else {
      options = {
        ...options,
        duration: options.duration || 7000,
        showClose: options.showClose !== false
      };
    }
    return originalError(options);
  };

  // 覆盖信息消息
  ElMessage.info = (options) => {
    if (typeof options === 'string') {
      options = {
        message: options,
        duration: 7000,
        showClose: true
      };
    } else {
      options = {
        ...options,
        duration: options.duration || 7000,
        showClose: options.showClose !== false
      };
    }
    return originalInfo(options);
  };
};

// 组件挂载时执行覆盖
onMounted(() => {
  overrideMessage();
  console.log('消息样式已覆盖');
});
</script>

<style>
/* 强制覆盖Element Plus的消息样式 - 级别极高 */
body .el-message,
html body .el-message,
#app .el-message,
.el-message {
  min-width: 400px !important;
  max-width: 600px !important;
  padding: 18px 24px !important;
  border: none !important;
  border-radius: 16px !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
  margin-top: 20px !important;
  color: white !important;
  z-index: 10001 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  right: auto !important;
  /* 确保消息居中显示 */
  position: fixed !important;
}

body .el-message .el-message__content,
html body .el-message .el-message__content,
#app .el-message .el-message__content,
.el-message .el-message__content {
  font-size: 17px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: white !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

body .el-message .el-message__icon,
html body .el-message .el-message__icon,
#app .el-message .el-message__icon,
.el-message .el-message__icon {
  font-size: 22px !important;
  margin-right: 16px !important;
  color: white !important;
}

body .el-message .el-message__closeBtn,
html body .el-message .el-message__closeBtn,
#app .el-message .el-message__closeBtn,
.el-message .el-message__closeBtn {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 20px !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

body .el-message--success .el-message__icon,
html body .el-message--success .el-message__icon,
#app .el-message--success .el-message__icon,
.el-message--success .el-message__icon {
  color: #66d763 !important;
}

body .el-message--warning .el-message__icon,
html body .el-message--warning .el-message__icon,
#app .el-message--warning .el-message__icon,
.el-message--warning .el-message__icon {
  color: #ffb840 !important;
}

body .el-message--error .el-message__icon,
html body .el-message--error .el-message__icon,
#app .el-message--error .el-message__icon,
.el-message--error .el-message__icon {
  color: #ff453a !important;
}

body .el-message--info .el-message__icon,
html body .el-message--info .el-message__icon,
#app .el-message--info .el-message__icon,
.el-message--info .el-message__icon {
  color: #32ade6 !important;
}

/* 样式注入指示器 */
.message-style-injected::after {
  content: '';
  display: none;
}
</style> 